<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
  <script>
    /* 
    1.jQuery是一个功能强大的函数库, 封装了以下功能
        DOM的CURD操作
        事件处理
        ajax请求
        其它的一些小函数工具

    2. jQuery核心函数
        1.是什么?
            就是jquery库向外暴露的$和jQuery, 一般都用$

        2.它有2种使用方式:
            (1)作为函数使用
            (2)作为对象使用

        3.$作为函数使用
            (1)参数为函数: 指定回调函数在页面加载完后执行
            (2)参数是选择器字符串: 查找所有匹配的元素, 返回jQuery对象
            (3)参数是标签格式字符串: 创建DOM对象, 返回jQuery对象
            (4)参数是DOM元素: 返回包含此DOM元素的jQuery对象
        4.$作为函数对象使用
            (1)发送ajax请求的各种方法: $.ajax()/get()/post()/getJSON()
            (2)一些工具方法: $.each(array)/type(data)

    3. jQuery核心对象
        1.2种情况产生的对象 (内部包含n个dom元素对象)
          (1)执行$函数返回的对象
          (2)调用jQuery核心对象的方法返回的对象
        2.主要方法
          (1)进行DOM进行增删改的方法
          (2)对内部的DOM元素进行进一步过滤查找的方法
          (3)进行事件处理的方法: 绑定监听/解绑监听/事件委派
    */

    /* 
    1. jQuery核心函数: 将$作为函数使用
    2. jQuery核心函数对象: 将$作为对象使用
    3. jQuery核心对象: 包含所有匹配的DOM的伪数组对象
    */

    /* 
    (1)参数为函数: 指定回调函数在页面加载完后执行
    (2)参数是选择器字符串: 查找所有匹配的元素, 返回jQuery对象
    (3)参数是标签格式字符串: 创建DOM对象, 返回jQuery对象
    (4)参数是DOM元素: 返回包含此DOM元素的jQuery对象
    */
   /* 需求1: 点击test1按钮, 提示按钮的文本内容 */

    $(function () {

      $('#btn1').click(function () {
        alert($(this).html())
      })
      /* 需求2: 在页面的最后添加一个新的按钮 */
      $('<button>新添加的</button>').appendTo('body')

      /* 需求3: 发送ajax请求, 提示请求结果 */
      /* 需求4: 遍历数组, 得到不同数据的类型 */
      /* 
      $作为函数对象使用
          (1)发送ajax请求的各种方法: $.ajax()/get()/post()/getJSON()
          (2)一些工具方法: $.each(array)/type(data)
      */
      $.ajax({
        url: 'https://api.github.com/search/users',
        type: 'GET',
        data: {// 指定query参数
          q: 'v',
        },
        success: (data) => {
          console.log('请求成功', data)
        },
        error: () => {
          alert('请求出错了')
        }
      })
      
      const arr = [1, 3, 5]
      console.log($.type(arr), $.type(arr[0])) // 'array' 'number'

      /* 需求5: 给列表中所有按钮添加点击监听, 点击删除当前行 */
      $('#btn2').click(function () {
        // $('ul>li>button').click(() => {
        //   alert('----')
        // })
        $('ul').children('li').children('button').click(function () {
           $(this).parent().remove()
        })
      })

      /* 需求6: 在最后添加一行 */
      $('#btn3').click(function () {
        $('ul').append('<li><span>XXX</span><button>删除</button></li>')
      }) 

      /* 需求7: 与需求5功能一样, 但使用事件委托 */
      $('#btn4').click(function () {
        // 将ul下所有li下的button点击事件监听委托给ul
        $('ul').delegate('li>button', 'click', function () {
          $(this).parent().remove()
        })
      }) 
      /* 
      事件委托的优点:
      1. 效率更高(只需要指定一个监听回调函数)
      2. 绑定事件监听后, 再添加的子项也自动有事件监听
      */

      /* 需求8: 解除btn1上的点击监听和列表的委托点击监听 */
      $('#btn5').click(function () {
        $("#btn1").off('click')
        $("ul").undelegate('click')
      }) 
    })
   
  </script>
</head>
<body>
  <!-- 
    需求1: 点击test1按钮, 提示按钮的文本内容
    需求2: 在页面的最后添加一个新的按钮
    需求3: 发送ajax请求, 提示请求结果
    需求4: 遍历数组, 得到不同数据的类型
  -->
  <button id="btn1">test1</button>
  <ul>
    <li>
      <span>A</span>
      <button>删除</button>
    </li>
    <li>
      <span>B</span>
      <button>删除</button>
    </li>
    <li>
      <span>C</span>
      <button>删除</button>
    </li>
  </ul>

  <!-- 
    需求5: 给列表中所有按钮添加点击监听, 点击删除当前行
    需求6: 在最后添加一行
    需求7: 与需求5功能一样, 但使用事件委托
    需求8: 解除btn1上的点击监听和列表的委托点击监听
  -->
  <button id="btn2">给列表中所有button添加点击监听</button><br>
  <button id="btn3">向列表中添加一个列</button><br>
  <button id="btn4">给列表中所有button添加点击监听(使用事件委托)</button><br>
  <button id="btn5">解绑事件监听</button><br>
</body>
</html>